<script setup lang="ts">
import { getPurchasePage } from "@/api/orderManag/shipperPrepar";
import { message } from "@/utils/message";
import { onMounted, ref } from "vue";
import { useColumns } from "./columns";
const { orderColumns, goodsColumns } = useColumns();

const props = defineProps({
  subOrderId: {
    type: Number,
    default: 0
  },
  // 	配货单类型 1 仓库 2 供应商
  distributionType: {
    type: Number,
    default: 2
  }
});

const submitForm = ref({
  orderIndex: ""
});
const tableRef = ref();
const goodsList = ref([]);
const tableSelectList = ref([]);

const loadOrder = ref(false);
const orderList = ref([]);
const showOrderList = ref([]);

// 选择商品
function handleSelectionChange(val) {
  tableSelectList.value = val;
}

// 获取出库单列表
const loadOrderList = async () => {
  loadOrder.value = true;
  let params = {
    onlyMySelf: false,
    orderStatus: 3,
    pageNum: 1,
    pageSize: 999
  };
  let { data } = await getPurchasePage(params);
  orderList.value = data.records || [];

  setTimeout(() => {
    loadOrder.value = false;
  }, 200);
};

const chooseChange = async index => {
  let orderData = orderList.value[index];
  console.log("orderData", orderData);

  showOrderList.value = [orderData];
  goodsList.value = orderData.itemList || [];
};

onMounted(() => {
  loadOrderList();
});

// 确认入库
const confirmOut = () => {
  return new Promise(resolve => {
    let obj = {
      isPass: false,
      params: {}
    };

    if (goodsList.value.length == 0) {
      message("请选择出库订单", { type: "warning" });
      resolve(obj);
      return;
    }

    let filterList = goodsList.value.filter(v => v.specNum && v.specNum !== 0);
    if (filterList.length == 0) {
      message("未填写出库数量", { type: "warning" });
      resolve(obj);
      return;
    }
    // for (let index = 0; index < goodsList.value.length; index++) {
    //   const v = goodsList.value[index];
    //   if (!v.stockCount) {
    //     message(`'${v.goodsName}' 未填写入库数量`, { type: "warning" });
    //     return obj;
    //   }
    // }
    let orderData = orderList.value[submitForm.value.orderIndex];

    let params = {
      optType: 3, // 业务类型 3备货出库 4直接出库
      depositoryType: 1,
      depositoryId: orderData.depositoryId,
      bizCode: orderData.purchaseOrderCode,
      itemList: filterList.map(v => {
        return {
          barCode: v.barCode,
          goodsCode: v.goodsCode,
          goodsId: v.goodsId,
          goodsName: v.goodsName,
          goodsType: v.goodsType,
          specCode: v.specCode,
          specImageJson: v.specImageJson,
          specName: v.specName,
          specNum: v.specNum
        };
      })
    };
    obj.isPass = true;
    obj.params = params;
    resolve(obj);
  });
};

defineExpose({ confirmOut });
</script>

<template>
  <div class="goods-table">
    <!-- 订单信息 -->
    <div class="mb-5">
      <h3 class="text-black mb-3">订单信息</h3>
      <el-form
        ref="formRef"
        label-position="right"
        label-width="110"
        :model="submitForm"
        class="w-[450px]"
      >
        <el-form-item label="备货订单编号" prop="orderIndex" required>
          <el-select
            v-model="submitForm.orderIndex"
            v-loading="loadOrder"
            filterable
            placeholder="请选择"
            @change="chooseChange"
          >
            <el-option
              v-for="(item, index) in orderList"
              :key="index"
              :label="item.purchaseOrderCode"
              :value="index"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="w-[80%]">
        <pure-table
          ref="tableRef"
          row-key="id"
          align-whole="center"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          max-height="500"
          :data="showOrderList"
          :columns="orderColumns"
          @selection-change="handleSelectionChange"
        />
      </div>
    </div>

    <!-- 商品明细 -->
    <div class="mb-5">
      <h3 class="text-black mb-3">商品明细</h3>
      <pure-table
        ref="tableRef"
        row-key="id"
        align-whole="center"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
        max-height="500"
        :data="goodsList"
        :columns="goodsColumns"
        @selection-change="handleSelectionChange"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.goods-table {
  padding: 0 20px;
  margin-bottom: 25px;
  min-height: 500px;
}
.tips {
  display: flex;
  align-items: center;
  padding: 6px 15px;
  border: 1px solid #c6e2ff;
  border-radius: 5px;
  background-color: #ecf5ff;
}
</style>
